<script setup lang="ts">
import {
  Airplay as VpsIcon,
  Server as ProviderIcon,
  Bell as NotifyIcon,
  LockKeyhole as AccountIcon,
} from "lucide-vue-next";

const menuList: Menu[] = [
  {
    id: "vps",
    label: "VPS管理",
    icon: VpsIcon,
    expend: true,
    children: [
      {
        id: "vps-renew",
        label: "VPS续期",
        href: "/vps/renew",
      },
      {
        id: "vps-list",
        label: "VPS列表",
        href: "/vps",
      },
      {
        id: "vps-add",
        label: "添加VPS",
        href: "/vps/add",
      },
    ],
  },
  {
    id: "provider",
    label: "服务商管理",
    icon: ProviderIcon,
    children: [
      {
        id: "provider-list",
        label: "服务商列表",
        href: "/provider",
      },
      {
        id: "provider-add",
        label: "添加服务商",
        href: "/provider/add",
      },
    ],
  },
  {
    id: "notify",
    label: "消息管理",
    icon: NotifyIcon,
    children: [
      {
        id: "notify-setting",
        label: "提醒设置",
        href: "/notify",
      },
    ],
  },
  {
    id: "account",
    label: "账号管理",
    icon: AccountIcon,
    children: [
      {
        id: "account-change-password",
        label: "修改密码",
        href: "/account/change-password",
      },
      {
        id: "account-change-password",
        label: "安全退出",
        href: "/account/logout",
      },
    ],
  },
];

useHead({
  title: "VPS续期提醒",
});
</script>

<template>
  <div class="flex">
    <aside class="shrink-0 bg-blue-50 min-h-screen min-w-64 p-6">
      <h2 class="text-2xl text-purple-500 text-center">VPS续期提醒</h2>

      <SideMenu
        v-for="menu in menuList"
        :key="menu.id"
        :is-expanded="menu.expend"
        :menu="menu"
      />
    </aside>
    <main class="grow p-6">
      <slot></slot>
    </main>
  </div>
</template>
